<template>
  <div class="yoyo-propTable-container">
    <div class="setting-area">
      <el-card class="setting-card">
        <div class="search-con">
          <el-form
            ref="ruleFormRef"
            class="search-form"
            :inline="true"
            :model="formSearchModel"
          >
            <template v-for="(item, index) in formSearchData">
              <el-form-item :label="item.label" :prop="item.name" v-show="isExpand ? isExpand : index < 3">
                <template v-if="item.valueType == 'input'">
                  <el-input
                    class="common-input max-input"
                    v-model="formSearchModel[item.name]"
                    :placeholder='`请输入${item.label}`'
                  ></el-input>
                </template>
                <template v-if="item.valueType == 'select'">
                  <el-select
                    class="common-input max-input"
                    style="width: 100%"
                    v-model="formSearchModel[item.name]"
                    :placeholder='`请输入${item.label}`'
                  >
                    <el-option
                      v-for="it in item.option"
                      :key="it.value"
                      :label="it.label"
                      :value="it.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-form-item>
            </template>
          </el-form>
          <div class="search-btn-container">
            <el-button type="primary" class="common-button" @click="onSubmit">查询</el-button>
            <el-button class="common-button" @click="onReset">重置</el-button>
            <el-button type="text" class="common-button" @click="isExpand = !isExpand">
              <span>{{ isExpand ? '合并' : '展开' }}</span>
              <i class="iconfont expand-icon icon-up-arrows" v-if="isExpand"></i>
              <i class="iconfont expand-icon icon-down-arrows" v-else></i>
            </el-button>
          </div>
        </div>
      </el-card>
    </div>
    <div class="table-container">
      <div class="operator">
        <slot name="btn"></slot>
      </div>
      <div class="table-con">
        <el-table
          class="table-model"
          height="380"
          v-loading="tbLoading"
          :data="tableData"
          :border="true"
          @selection-change="onDefinedChange"
          :header-cell-style="{background: variables.tableHeaderBackGroundColor, color: variables.tableHeaderColor}"
        >
          <template v-for="item in column">
            <el-table-column
              v-if="item.type"
              :type="item.type"
              :label="item.label"
              :width="item.width"
              :align="item.align != null ? item.align : 'center'"
              :fixed="item.fixed"
            />
            <el-table-column
              v-else
              :prop="item.name"
              :label="item.label"
              :width="item.width"
              :align="item.align != null ? item.align : 'center'"
              :fixed="item.fixed"
            >
              <template #default="scope">
                <span v-if="!item.slot">{{ scope.row[item.name] }}</span>
                <slot v-else :name="item.name" :item="item" :row="scope.row"></slot>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </div>
      <!-- ------------分页--------------->
      <div class="pagination">
        <el-pagination
          :currentPage="pageParams.currentPage"
          :page-size="pageParams.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageParams.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import variables from '@/styles/variables.scss'
export default {
  name: 'index',
  props:{
    data:{
      type: Array,
      default: () => []
    },
    column:{
      type: Array,
      default: () => []
    },
    loading:{
      type: Boolean,
      default: false,
    }
  },
  data(){
    return {
      key: Math.random(),
      formSearchModel: {},
      formSearchData: [],
      isExpand: false, // 是否展开
      tableData: [],
      pageParams: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      tbLoading: false,
    }
  },
  watch:{
    data:{
      immediate: true,
      deep: true,
      handler(val){
        this.tablePages(val)
      }
    },
    column:{
      immediate: true,
      deep: true,
      handler(val){
        this.getFormSearchModel()
        this.getFormSearchData()
      }
    },
    loading:{
      immediate: true,
      deep: true,
      handler(val){
        this.tbLoading = val
      }
    }
  },
  computed:{
    variables(){
      return variables
    },
  },
  mounted () {
    this.getFormSearchModel()
    this.getFormSearchData()
  },
  methods:{
    // 获取表格分页数据
    tablePages(val){
      // 深拷贝
      var data = JSON.parse(JSON.stringify(val))
      this.$set(this.pageParams,'total',data.length)
      this.tableData = data.splice((this.pageParams.currentPage - 1) * this.pageParams.pageSize, this.pageParams.pageSize)
    },
    // 获取表单查询字段
    getFormSearchData(){
      const search = []
      this.column.map(item => {
        item.inSearch && search.push(item)
      })
      this.formSearchData = search
      return search
    },
    // 获取表单查询字段模型
    getFormSearchModel(){
      const model = {}
      this.column.map(item => {
        if(item.inSearch){
          model[item.name] = null
        }
      })
      this.formSearchModel = model
      return model
    },
    // 提交查询的字段值
    onSubmit(){
      this.tbLoading = true
      this.$emit('update:loading', true)
      this.$emit('onSubmit')
      setTimeout(() =>{
        this.tbLoading = false
      },1000)
    },
    // 重置查询的字段值
    onReset(){
      this.tbLoading = true
      this.$emit('update:loading', true)
      this.$emit('reset')
      // 在使用 validate 、resetFields 方法时，el-form-item 必须设置 prop 属性，否则方法无效。
      this.$refs['ruleFormRef'].resetFields()
      this.$set(this.pageParams,'currentPage',1)
      setTimeout(() =>{
        this.tbLoading = false
      },1000)
    },
    // 行发生改变
    onDefinedChange(row){
      this.$emit('selection-change',row)
    },
    // 当前分页大小发生改变
    handleSizeChange(val){
      this.$set(this.pageParams,'pageSize',val)
      this.tablePages(this.data)
    },
    // 当前页数发生改变
    handleCurrentChange(val){
      this.$set(this.pageParams,'currentPage',val)
      this.tablePages(this.data)
    }
  },
}
</script>

<style lang="scss" scoped>
.yoyo-propTable-container{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.setting-area{
  margin-bottom: 10px;
}
.table-container{
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 0 12px rgba(0, 0,0 , 0.05);
  min-height: 460px;
}
.table-con{
  position: relative;
  flex: 1;
}
.table-model{
  position: absolute;
  height: 100%;
}
.setting-card{
  width: 100%;
  min-height: 100px;
}
.search-con{
  display: flex;
}
.search-form{
  flex: 1;
  text-align: left;
}
.search-btn-container{
  flex-shrink: 0;
  margin-top: 4px;
}
.expand-icon{
  margin-left: 4px;
  font-size: 12px;
}
.operator{
  margin-bottom: 10px;
}
</style>
<style lang="scss">
.search-form{
  .el-form-item{
    margin-right: 18px !important;
  }
}
.max-input{
  .el-input__inner{
    width: 300px;
  }
}
</style>
